<template>
  <div>
    <ItCardPage title="测试1">
      <template #headerRender>
        <Button type="primary">123</Button>
      </template>
      <Table :columns="columns"  :data-source="dataSource" :pagination="pagination" 
      :loading="loading"
      @change="changeHandle" 
      size="small"
      :scroll="{x: 1100, y: 300 }" />
    </ItCardPage>
  </div>
</template>
<script lang="ts" setup>
import { usePagination } from '@iboot-vue/vue-request-fork';
import { pagePost } from '../api';
import { Button, Table } from 'ant-design-vue';
import { computed } from 'vue';
import { pageOption } from '@/utils/pagination';
const columns = [
  {
    title: '用户id',
    dataIndex: 'userId',
    width: '10%',
  },
  {
    title: '标题',
    dataIndex: 'title',
    width: '30%',
  },
  {
    title: '内容',
    dataIndex: 'body',
  },
];

const {
  data,
  runAsync,
  current,
  total,
  loading,
  pageSize,
} = usePagination(pagePost, pageOption());
const pagination = computed(() => ({
  current: current.value,
  pageSize: pageSize.value,
  total: total.value
}));
const dataSource = computed(() => data.value?.['records'] ?? [])

const changeHandle = (page: { pageSize: number; current: number }) => {
      runAsync({
        pageNumber: page.current,
        pageSize: page.pageSize
      });
    };
    

</script>